<template>
<div id="app">
  {{myname}}
  <button @click="count++">{{count}}</button>
<div :class="changeColor">切换颜色</div>
<div :class="isChange ? 'red':'pink'">切换颜色</div>
<button @click="handleChange">change</button>
</div>
</template>

<script>
import { handleError } from '@vue/runtime-core'
export default {
data(){
  return {
    myname:'cxm',
    count:0,
    changeColor:'red', // class=red
    isChange:true
  }
},
methods:{
handleChange() {
  this.changeColor="pink"
  this.myname='zlls'
  this.isChange=!this.isChange
}
}
}
</script>

<style>
.red {
  background-color: yellow;
}
.pink {
  background-color: red;
}
</style>